<template>
	<view class="page">
		<view class="top box">
			<view class="iconfont iconfanhui flex-1" @tap="back">
			</view>
			<view class="title flex-1">
				{{teamInfo.name}}
			</view>
			<view class="icon flex-1 box d-ai-c box">
				<view class="box d-ai-c flex-3 d-jc-end" @tap="catCommand">
					查看口令
				</view>
			</view>
		</view>
		<!-- 审核状态栏 -->
		<view class="box d-jc-sa title-state">
			<view class="box-c d-jc-c" @tap='changeTap(index,item)' :class="activateIndex==index?'tab-line':''" v-for="(item,index) in tabList" >
				<text>{{item.name}}</text>
				<text ></text>
			</view>
			
		</view>
		<!-- 审核 -->

		<scroll-view  lower-threshold="400"  :style="{height:height+'px'}" scroll-y >
			<view class="box-c d-ai-c" v-if="!isShow">
				<view class="check-card px-2 pt-1 mt-2" v-for="(item,index) in checkList">
					<view class="box d-jc-sb py-1">
						<view class="apply-time">
							<text>报名时间：</text>
							<text>{{item.createTime |dateFormatYearMine}}</text>
						</view>
						<view class="state">
							<text >
								<text class="pass" v-if="item.status==0">
									已同意
								</text>
								<text  class="check-ing" v-else-if="item.status==1">
									待处理
								</text>
								<text class="fail" v-else-if="item.status==2">
									已拒绝
								</text>
							</text>
						</view>
					</view>
					<view class="box user">
						<view class="flex-8 name">
							<text>
								报名人：
							</text>
							<text>
								{{item.nickName}}
							</text>
						</view>
						<view class="ml-3 box flex-8 pb-2 phone">
							<text>
								手机号：
							</text>
							<text class="">
								{{item.phone}}
							</text>
						</view>
						<view class="fl">

						</view>
					</view>
					<view class="">

					</view>
					<view class="box button" v-if='item.status==1'>
						<view class="flex-1" @tap='checkApply(item,0)'>
							通过
						</view>
						<view class="flex-1"  @tap='checkApply(item,2)'>
							拒绝
						</view>
					</view>

				</view>
				
			</view>
			<view class="null box-c d-jc-c d-ai-c" v-if="isShow">
				<image class="mt-5" src="../../static/images/activity/shenqing@2x.png" mode=""></image>
				<text class="mt-3">您暂时还没报名任何团队~</text>
			</view>
		</scroll-view>



	<zwyPopUp :ishide='isshow'  width="500rpx" height="200rpx" radius="16rpx" class='popUp '>
		<!-- 自定义展示内容 -->
		<view class=" content" style="height: 200rpx;">
			<view class="box-c d-ai-end mr-1">
				<text class="iconfont iconcha" @click="isshow=false"></text>
			</view>
			<view class="box-c d-jc-c d-ai-c">
				<view class="title">{{activityUnityInfo.name}}</view>
				<view class="mt-1">{{activityUnityInfo.password}}</view>
			</view>
		</view>
		<!-- 自定义关闭按钮 -->
		<!-- <view class="close" >✕</view> -->
	</zwyPopUp>
	</view>
	



	</view>
</template>

<script>
	import zwyPopUp from '@/components/zwy-popup/zwy-popup.vue'
	export default {
		components: {zwyPopUp},
		data() {
			return {
				refresherTriggered: false,
				_refresherTriggered: false,
				height: '500',
				tabList:[
					{id:'',name:'全部'},
					{id:1,name:'待处理'},
					{id:0,name:'已同意'},
					{id:2,name:'未同意'}
				],
				activateIndex:0,
				status:'',
				checkList:[],
				pageNum:1,
				pageSize:10,
				hasNextPage:true ,//是否存在下一页
				isshow:false,
				activityUnityInfo:{}, //团信息
				isShow:false,
				id:'',
				teamInfo:"",
				type:''

			};
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.height = res.windowHeight - uni.upx2px(250) //windoHeight为窗口高度，主要使用的是这个
		
				}
			})
		},
		onShow() {
			this.pageNum=1
			this.checkList=[]
			this.getApplyRecordByUnityLeader()
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			this.TeamInfo(option.id,option.type)
		},
		methods: {
			//团队详情
			TeamInfo(id,type) {
				this.$api.TeamInfo({
					id: id,
					type: type
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.teamInfo = res.data.dataMap
						
					}
				})
			},
			catCommand(){
				this.isshow =true
				this.$api.getCommand({
				}).then((res)=>{
					this.activityUnityInfo=res.data.dataMap
					
				})
				
			},
			back(){
				uni.navigateBack(1)
			},
			nextPage(){
				if (this.hasNextPage) {
					this.pageNum++
					this.getApplyRecordByUnityLeader()
				}
				
			},
			//审核
			checkApply(item,status){
				this.$api.checkApply({
					id:item.id,
					status:status
				}).then((res)=>{
					if(res.data.success){
						uni.showToast({
							title: "操作成功",
							duration: 1500,
							icon: 'none',
						});
						this.pageNum=1
						this.checkList=[]
						this.getApplyRecordByUnityLeader()
					}else{
						uni.showToast({
							title: res.data.message,
							duration: 1500,
							icon: 'none',
						});
					}
				})
			},
			//切换tap
			changeTap(index,item){
				this.activateIndex = index
				this.status = item.id
				//清空数组和分页信息
				this.pageNum=1
				this.checkList=[]
				this.getApplyRecordByUnityLeader()
				
			},
			//活动审核列表
			getApplyRecordByUnityLeader(){
				this.$api.getApplyRecordByUnityLeader({
					status:this.status,
					id:this.id
				}).then((res)=>{
					this.checkList = this.checkList.concat(res.data.dataMap.list)
					if(this.checkList.length<1){
						this.isShow=true
					}else{
						this.isShow=false
					}
				})
				
			},
			// refresherrefresh() {
			// 	console.log("自定义下拉刷新被触发");
			// 	let _this = this;
			// 	if (_this._refresherTriggered) {
			// 		return;
			// 	}
			// 	_this._refresherTriggered = true;
			// 	//界面下拉触发，triggered可能不是true，要设为true
			// 	if (!_this.refresherTriggered) {
			// 		_this.refresherTriggered = true;
			// 	}
			// 	this.loadStoreData();
			// },
			// refresherrestore() {
			// 	console.log("自定义下拉刷新被复位");
			// 	let _this = this;
			// 	_this.refresherTriggered = false;
			// 	_this._refresherTriggered = false;
			// },
			// refresherabort() {
			// 	console.log("自定义下拉刷新被中止	");
			// 	let _this = this;
			// 	_this.refresherTriggered = false;
			// 	_this._refresherTriggered = false;
			// },
			// loadStoreData() {
			// 	let _this = this;
			// 	this.listData();
			// 	setTimeout(() => {
			// 		_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
			// 		_this._refresherTriggered = false;
			// 	}, 1000)
			// },
			// listData() {
			// 	let _this = this;
			// 	//这里是调用后台接口的方法数据
			// },
		}
	}
</script>

<style lang="less">
	.null {
		image {
			width: 340rpx;
			height: 340rpx;
		}	
		text{
			color: #8b8b8b;
		}
	
	}

	.popUp{
		.content {
			width: 100%;
			height: 100%;
			// display: flex;
			.title{
				font-weight: bold;
			}
			
			
		}
		
		.close {
			width: 60rpx;
			height: 60rpx;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
			border-radius: 50%;
			border: 1px solid #FFFFFF;
			position: relative;
			bottom: -10%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
	
	.top {
		color: #fff;
		padding: var(--status-bar-height) 20rpx 20rpx 20rpx;
		background-color: rgb(255, 85, 81);
	
		.iconfanhui {
			font-size: 32rpx;
		}
	
		.title {
			text-align: center;
			font-size: 32rpx;
			overflow:hidden; //超出的文本隐藏
			text-overflow:ellipsis; //溢出用省略号显示
			white-space:nowrap; //溢出不换行
		}
	}
	
	.check-card {
		.state {
			.fail{
				color: #8f8f8f;
			}
			.pass{
				color: #FF5551;
			}
			.check-ing{
				color: #FF7E51;
			}
		}

		.apply-time {
			text:nth-child(1) {
				color: #999999;
				font-size: 26rpx;
			}

			text:nth-child(2) {
				color: #333333;
				font-size: 26rpx;
			}
		}

		.button {
			text-align: center;

			view {
				padding: 10px 0;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			view:nth-child(1) {
				border-right: solid 2rpx #F8F8F8;

			}
		}

		.user {
			.phone {
				text:nth-child(1) {
					color: #999999;
				}

				text:nth-child(2) {
					color: #333333;
				}
			}

			.name {
				text:nth-child(1) {
					color: #999999;
				}

				text:nth-child(2) {
					color: #333333;
				}
			}

			border-bottom: solid 2rpx #F8F8F8;
		}

		width: 90%;
		background-color: #fff;
		border-radius: 20rpx;

	}

	.title-state {
		background-color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		color: #999999;
		font-size: 37rpx;
		.tab-line{
			font-size: 30rpx;
			text:nth-child(1){
				color: #333333 !important;
				font-weight: bold !important;
			}
			text:nth-child(2){
				background-color: #FF5551 !important;
				height: 5rpx !important;
				margin-top: 5rpx !important;
				border-radius: 80rpx !important;
			}
		
			
		}
		
		
	}

	.page {
		background-color: #F8F8F8;
		height: 100%;
	}
</style>
